<script setup lang="ts">
// 使用pinia
// 第一步：导入counter中的store
import { useCounterStore } from '@/stores/counter'
import { useJokerStore } from '@/stores/joker'

// 第二步：调用store
const store = useCounterStore()

const jokerStore = useJokerStore()
</script>

<template>
  <div>
    <!-- 结构 -->
    <h2>我的页面</h2>

    <h3>pinia 中的 count 值：{{ store.count }}</h3>
    <h3>pinia 中的 双倍数据{{ store.doubleCount }}</h3>

    <button @click="store.increment()">点击累加</button>

    <h3>笑话：{{ jokerStore.joke }}</h3>

    <button @click="jokerStore.refreshJoke()">获取新的笑话</button>
  </div>
</template>

<style>
/* 样式 */
</style>
